<script setup lang="ts">

</script>

<template>
    <div class="rotate-image">
        <img src="../assets/svg/vinyl.svg" />
    </div>
</template>

<style scoped>
.rotate-image {
    img {
        transform-origin: center center; /* 指定中心点为元素中心 */
        padding: 5px 20px 5px 10px;
        height: 75px;
        display: block;
    }
}
.playing {
    animation: rotate 4s linear infinite; /* 旋转动画 */
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* 初始角度为0度 */
    }
    to {
        transform: rotate(360deg); /* 最终角度为360度，即一圈 */
    }
}
</style>
